<template>
  <div style="position:relative;background:white">
    <div class="communication_content" style="display: inline-block;" >
      <div class="sys_msg" v-for="msg in msgList" :key="msg.messageId">
        <el-button icon="el-icon-delete" size="mini" style="float:right;font-size:16px" type="text" @click="deleteMsg(msg.messageId)"></el-button>
        <div class="sys_msg_content">{{msg.sendUser}} : {{msg.content}}
        </div>
        <div class="sys_msg_date">
          {{ msg.createTime }}
        </div>
        <el-divider></el-divider>
      </div>

      <el-empty v-show="msgList.length==0" description="暂无数据"></el-empty>
    </div>

    <el-image :src="bg" style="width:245px;position:absolute;right:0;top:0;height:500px;" ></el-image>

  </div>

</template>

<script>
import bg from "@/assets/img/bg.png"
import {delMsg, getMessage} from "@/network/recruit";
export default {
  name: "Message",
  data(){
    return{
      bg:bg,
      msgList:[],
      userName:'',
    }
  },
  mounted() {
    if(localStorage.getItem("common_userName")){
      this.userName = localStorage.getItem("common_userName");
    }
    this.getMsg();
  },
  methods:{
    getMsg(){
      getMessage(this.userName).then(res=>{
        this.msgList = res.data.data;
      })
    },
    deleteMsg(messageId){
      delMsg(messageId).then(res=>{
        if(res!=undefined){
          this.$message.success("删除成功");
          this.getMsg();
        }
      })
    }

  }
}
</script>

<style scoped>
#communication {
  background-color: white;
  box-shadow: 0 5px 5px 0 #eceaea;
  min-height: 502px;
  overflow: hidden;
}
.left_side{
  width:235px;
  height:502px;
  border-right: 1px solid #eceaea;
  overflow-y:scroll;
  overflow-x:hidden;
}
.left_msg{
  padding:10px;
  height:45px;
  cursor: pointer;
}
.left_msg:hover{
  background-color:#eceaea;
}
.lm_content{
  display: inline-block;
  height:45px;
  line-height:45px;
  font-size:16px;
  margin-left:15px;
  width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.el-divider--horizontal {
  margin:5px 0;
}
.communication_content{
  padding:20px;
  width:538px;
  overflow-y:scroll;
  overflow-x:hidden;
  height:463px;
}
.sys_msg{
  margin-bottom:20px;
}
.sys_msg_content{
  color: #333333;
  font-size:14px;
}
.sys_msg_date{
  color:#aaa;
  font-weight: 400;
  font-size:14px;
  text-align: right;
  margin-bottom: 20px;
}


</style>